<template>
  <el-dialog v-model="showDelayOrder" width="1000px" style="height: 700px" center :show-close="false">
    <template #header>
      <div class="header">
        <title-view title="历史延期单" />
        <el-icon size="16px" style="cursor: pointer" @click="handleCancel"><Close /></el-icon>
      </div>
    </template>
    <div class="history-container" v-loading="isLoading">
      <div class="customer-info">{{ tableDataInfo.customerName }}丨{{ tableDataInfo.residence }}</div>
      <el-table
        ref="clientManagerRef"
        :data="tableDataInfo.list"
        stripe
        style="width: 100%"
        border
        max-height="580px"
        :header-cell-style="{
          background: '#F2F6FC',
          color: '#909399',
          'font-weight': 400,
          'font-size': '14px',
          'border-right': '1px solid #E1E6ED',
          'text-align': 'center'
        }"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="userName" label="开单人" width="100" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="createTime" label="开单时间" width="200" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column label="客户确认" width="100" show-overflow-tooltip align="center">
          <template #default="{ row }">
            <span :style="{ color: row.status === 3 ? '#ff3333' : '' }">{{ statusObj[row.status] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="确认时间" width="100" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="day" label="延期天数" width="100" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="cause" label="延期原因" show-overflow-tooltip align="center"></el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script setup>
import { computed, ref, getCurrentInstance, toRaw } from "vue";
import { useRoute } from "vue-router";
import { Close } from "@element-plus/icons-vue";
import { tableRowClassName } from "@/views/client/utils";
import { delayList } from "@/apis/constructionPlan";

const route = useRoute();
const customerId = route.query.customerId;

const { proxy } = getCurrentInstance();
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
});
const showDelayOrder = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});
const emit = defineEmits(["update:modelValue"]);

const statusObj = {
  1: "待确认",
  2: "已确认",
  3: "已拒绝"
};

const isLoading = ref(false);
const tableDataInfo = ref({});
const getDetail = async () => {
  isLoading.value = true;
  const { data } = await delayList(customerId);
  tableDataInfo.value = data;
  isLoading.value = false;
};

const handleCancel = () => {
  showDelayOrder.value = false;
};

getDetail();
</script>

<style scoped lang="scss">
@use "@/assets/styles/mixin";
.header {
  display: flex;
  justify-content: space-between;
}
.history-container {
  .customer-info {
    color: #86909c;
    font-size: 14px;
    margin-bottom: 10px;
  }
}
</style>
